<template>
  <el-dialog v-model="isShowDialog"
             :before-close="handleClose"
             title="采购订单详情"
             draggable
             width="80%"
             append-to-body
  >

    <el-form :inline="true" :model="formData" label-width="120px">
      <div style="display: flex;flex-wrap: wrap">
        <el-col :span="6">
          <el-form-item label="采购单号：">
             {{formData.purchaseCode}}
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="单据状态：">
            {{ returnDictLabel(purchase_status, formData.status) }}
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="采购仓库：">
            {{formData.warehouseName}}
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="收货人：">
            {{formData.receiptByName}}
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="联系方式：">
            {{formData.receiptPhone}}
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="收货地址：" style="width: 92%">
            {{formData.receiptAddress}}
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="备注：" style="width: 90%">
            {{formData.remark}}
          </el-form-item>
        </el-col>
      </div>
    </el-form>

    <div class="justify-content items-center" style="margin-bottom: 15px" >
      <div class="plan">
        <span class="information"></span>
        <span class="informationText">商品信息</span>
      </div>
    </div>
    <vxe-table
        border
        show-overflow
        :row-config="{isCurrent: true, isHover: true}"
        style="margin-top: 10px;"
        align="center"
        :data="tableList"
        height="200"
    >
      <vxe-column field="status" width="110" title="单据状态">
        <template v-slot="{row}">
          {{ returnDictLabel(purchase_status, row.status) }}
        </template>
      </vxe-column>
      <vxe-column field="purchaseCode" width="200" title="采购单号"></vxe-column>
      <vxe-column field="skuCode" width="200" title="SKU编码"></vxe-column>
      <vxe-column field="skuName" width="220" title="商品名称" ></vxe-column>
      <vxe-column field="coverUrl"  width="180" title="商品图片">
        <template #default="{row}">
          <ImagePreview v-if="row.coverUrl" :width="150" :height="50" :src="row.coverUrl" ></ImagePreview>
        </template>
      </vxe-column>
      <vxe-column field="warehouseName" width="150" title="采购仓库" ></vxe-column>
      <vxe-column field="totalNum" width="100" title="采购数量" ></vxe-column>
      <vxe-column field="totalMoney" width="100" title="采购费用" ></vxe-column>
      <vxe-column field="vendorName" width="150" title="供应商名称" ></vxe-column>
      <vxe-column field="delivery" width="120" title="配送方式" ></vxe-column>
      <vxe-column field="waybillCode" width="150" title="运单号" ></vxe-column>
      <vxe-column field="receiptByName" width="150" title="收货人" ></vxe-column>
      <vxe-column field="receiptPhone" width="150" title="联系方式" ></vxe-column>
      <vxe-column field="receiptAddress" width="150" title="收货地址" ></vxe-column>
      <vxe-column field="remark" width="200" title="备注" ></vxe-column>
      <vxe-column field="createByName" width="120" title="创建人" ></vxe-column>
      <vxe-column field="createTime" width="180" title="创建时间" ></vxe-column>
    </vxe-table>

    <div class="justify-content items-center" style="margin: 15px 0" >
      <div class="plan">
        <span class="information"></span>
        <span class="informationText">审核信息</span>
      </div>
    </div>
    <el-form :inline="true" :model="formData" label-width="120px">
      <div style="display: flex;flex-wrap: wrap">
        <el-col :span="12">
          <el-form-item label="审核备注："  style="width: 90%">
            {{formData.auditRemark}}
          </el-form-item>
        </el-col>
      </div>
    </el-form>

    <div class="justify-content items-center" style="margin-bottom: 15px" >
      <div class="plan">
        <span class="information"></span>
        <span class="informationText">ERP采购信息</span>
      </div>
    </div>
    <el-form :inline="true" :model="formData" label-width="120px">
      <div style="display: flex;flex-wrap: wrap">
        <el-col :span="6">
          <el-form-item label="供应商：">
             {{formData.vendorName}}
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="采购费用：">
            {{formData.totalMoney}}
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="配送方式：">
            {{formData.delivery}}
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="运单号：">
            {{formData.waybillCode}}
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="发货数量：">
            {{formData.shipmentNum}}
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="入库数量：" style="width: 92%">
            {{formData.putawayNum}}
          </el-form-item>
        </el-col>
      </div>
    </el-form>

    <template #footer>
        <span class="dialog-footer">
           <el-button type="primary" @click="handleClose"> 关闭 </el-button>
        </span>
    </template>

  </el-dialog>
</template>

<script setup>
import ImagePreview from "@/components/ImagePreview/index.vue";
import {getCurrentInstance, onMounted} from "vue";

const {proxy} = getCurrentInstance();
const { purchase_status } = proxy.useDict("purchase_status");
let formData = ref({})
const props = defineProps({
  isShowDialog: {
    type: Boolean,
    default: false
  },
  detailData:{type:Object}
})
let tableList=ref([])
onMounted(()=>{
  formData.value=props.detailData
  tableList.value=[props.detailData]
})

const emits = defineEmits(['cancel'])

function handleClose() {
  emits('cancel')
}

</script>

<style scoped lang="scss">

</style>